<template>
  <div>
    <NavBar>
      <template slot="content">
        <div>消息</div>
      </template>
      <template slot="right">
        <div @click="clearAll()" class="flex-row flex-align-center">
          <img class="c-5wkmen-del" src="./img/del3.png" />
          <span class="header-right-text">标记已读</span>
        </div>
      </template>
    </NavBar>
    <div class="msg-list">
      <div
        class="msg-list-item flex-row flex-align-center"
        @click="
          $router.push({ path: './msgSys', query: { messageType: '01' } })
        "
      >
        <div class="list-item-left">
          <van-badge :dot="sysCount !== 0" class="dot">
            <img class="c-5wkmen" src="./img/msg3.png" />
          </van-badge>
        </div>
        <div class="list-item-right">
          <div class="list-item-title">平台消息</div>
          <!-- <div class="list-item-desc">您有一条平台消息待查看>></div> -->
        </div>
      </div>
      <div
        class="msg-list-item flex-row flex-align-center"
        @click="
          $router.push({ path: './msgManley', query: { messageType: '03' } })
        "
      >
        <van-badge :dot="myCount !== 0">
          <div class="list-item-left">
            <img src="./img/text3.png" class="img c-5wkmen" />
          </div>
        </van-badge>

        <div class="list-item-right">
          <div class="list-item-title">我的消息</div>
          <!-- <div class="list-item-desc">最热资讯、保险干货尽在万利头条</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import API from '@/services/h5/home'
import msgAPI from '@/services/h5/msg'
import NavBar from '@/components/h5header'
export default {
  components: { NavBar },
  data() {
    return {
      sysCount: 0,
      myCount: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      API.getMsg().then(res => {
        if (res.data.code === 1000 && res.data.data) {
          res.data.data.map(item => {
            if (item.messageType === '01') {
              this.sysCount = item.unreadCount
            }
            if (item.messageType === '03') {
              this.myCount = item.unreadCount
            }
          })
        }
      })
    },
    async clearAll() {
      let res = await msgAPI.readAll()
      if (res.data && res.data.code === 1000) {
        this.$message.success('标记已读')
        this.getData()
      }
    }
  }
}
</script>
<style scoped lang="less">
/deep/.van-badge--fixed {
  top: 8px;
  right: 8px;
}
.header-right-text {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}
.msg-list {
  margin-top: 15px;
  padding: 0 15px;
  &-item {
    margin-bottom: 15px;
  }
  .list-item-right {
    margin-left: 15px;
    width: 280px;
    height: 58px;
    line-height: 58px;
  }
  .list-item-left {
    width: 50px;
    height: 50px;
  }
  .list-item-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  .list-item-desc {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
  }
}
.c-5wkmen {
  width: 50px;
  height: 50px;
  &-del {
    width: 13px;
    height: 14px;
  }
}
</style>
